<template>
  <div>
    <TopNav title="个人中心" />
    <div
      class="header"
      @click="showBg = true"
      :style="{ background: 'url(' + url + ') no-repeat 0 0 / cover' }"
    >
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt=""
      />
      <img v-else src="@/assets/logo.png" alt="" />
      <div class="info">
        <div class="name">
          <span
            class="iconfont"
            :class="userInfo.gender == 1 ? 'iconxingbienan' : 'iconxingbienv'"
          ></span
          >{{ userInfo.nickname }}
        </div>
        <div class="signature">点击设置个性签名</div>
        <div class="date" v-if="userInfo.create_date">
          注册时间: {{ userInfo.create_date.split("T")[0] }}
        </div>
      </div>
      <div class="toEdit" @click.stop="$router.push('/Edit')">编辑资料</div>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="showBg" @click="toBg" round>
      <van-button plain>更改个人主页背景</van-button>
    </van-popup>
    <div class="barList">
      <div class="wrap">
        <PersonalBar
          label="我的关注"
          text="关注的用户"
          @barClick="$router.push('/Follows')"
        />
        <PersonalBar label="我的跟帖" text="跟帖/回复" />
        <PersonalBar label="我的收藏" text="文章/视频" />
        <PersonalBar label="设置" />
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav.vue";
import PersonalBar from "@/components/PersonalBar.vue";

export default {
  components: {
    TopNav,
    PersonalBar,
  },
  data() {
    return {
      showBg: false,
      url: this.$backgroundImg.url,
      userInfo: [],
    };
  },
  created() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
    }).then((res) => {
      this.userInfo = res.data.data;
    });
  },
  // mounted() {
  //   this.url = this.$backgroundImg.url
  //     ? this.$backgroundImg.url
  //     : require("@/assets/1.jpg");
  // },
  methods: {
    toBg() {
      this.$router.push("/background");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 50 / 360 * 100vw 12 / 360 * 100vw;
  padding-top: 80 / 360 * 100vw;
  text-align: center;
  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 16 / 360 * 100vw;
  }
  .info {
    color: #ffffff;
    font-weight: 700;
    .name {
      font-size: 16 / 360 * 100vw;
      .iconxingbienan,
      .iconxingbienv {
        color: #fff;
        vertical-align: middle;
        background-color: #177cb0;
        margin-right: 4 / 360 * 100vw;
        padding: 2 / 360 * 100vw 6 / 360 * 100vw;
        border-radius: 8 / 360 * 100vw;
        font-size: 12 / 360 * 100vw;
      }
    }
    .signature {
      font-size: 14 / 360 * 100vw;
      padding: 10 / 360 * 100vw 0;
    }
    .date {
      font-size: 14 / 360 * 100vw;
      color: #fff;
      font-weight: normal;
      opacity: 0.8;
    }
  }
  .toEdit {
    display: inline-block;
    width: 70 / 360 * 100vw;
    padding: 8 / 360 * 100vw 20 / 360 * 100vw;
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 30 / 360 * 100vw;
    font-size: 14 / 360 * 100vw;
    margin-top: 10 / 360 * 100vw;
  }
}
.barList {
  position: relative;
  min-height: 40vh;
  .wrap {
    position: absolute;
    left: 0;
    top: -20 / 360 * 100vw;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
    border-radius: 16 / 360 * 100vw 16 / 360 * 100vw 0 0;
  }
}
</style>
